<template>
    <div class="banner">
        <el-carousel height="400px" trigger="click">
            <el-carousel-item class="item" v-for="(item,index) in banners" :key="index">
                <el-image class="item-image" :src="item.path" fit="cover"></el-image>
<!--                <img :src="item.path" class="item-image"/>-->
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        // props: ['banners'],写法一
        props:{
            banners: Array,
            // duration: {
            //     type: Number,
            //     required: true,
            //     default: 2000
            // }
        }
    }
</script>

<style lang="scss" scoped>
    .banner {
        .item{
            width: 100%;
            .item-image{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>